<template>
  <view class="container-main">
    <!-- 添加收货地址 -->
    <view class="addAddress" v-if="JSON.stringify(defaultAddress) == '{}'" @click="chooseUserAddress">
      <view class="text">
        请添加收货地址
      </view>
      <uni-icons type="forward" color="#9BA3AA"></uni-icons>
    </view>
    <!-- 展示收货地址处 -->
    <view class="deliveryAddress" v-else>
      <view class="address-item">
        <view class="left">
          <view class="name">
            {{defaultAddress.name}} {{defaultAddress.phone}}
          </view>
          <view class="address">
            {{defaultAddress.region}}{{defaultAddress.street}}
          </view>
        </view>
        <view class="right" @click="amendAddress">
          <uni-icons type="bars" size="30"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 商品展示处 -->
    <view class="goodsList">
      <uni-swipe-action>
        <block v-for="(goods,index) in cart" :key="index">
          <uni-swipe-action-item :right-options="Newoptions" @click="deleteGoods(goods)">
            <view class="goods-item">
              <!-- 商品左侧图片区域 -->
              <view class="goods-item-left">
                <image :src="imgPrefixAddress + goods.goodsPreviews.split(',')[0]" class="goods-pic"></image>
              </view>
              <!-- 商品右侧信息区域 -->
              <view class="goods-item-right">
                <!-- 商品标题 -->
                <view class="goods-name">{{goods.goodsName}}</view>
                <view class="goods-specification">
                  {{goods.name}}
                </view>
                <view class="goods-info-box">
                  <!-- 商品价格 -->
                  <view class="goods-price">￥{{goods.retailValue}}</view>
                  <!-- 商品数量 -->
                  <uni-number-box :min="1" :value="goods.amount"
                    @change="numChangeHandler($event,goods.cartId)"></uni-number-box>
                </view>
              </view>
            </view>
          </uni-swipe-action-item>
        </block>
      </uni-swipe-action>
    </view>

    <!-- 到货时间 配送相关 -->
    <view class="distribution">
      <!-- 预计到货时间 -->
      <view class="time">
        <view class="time-left">
          <view class="big">
            预计到货时间
          </view>
          <view class="small">
            延期发货最多支持30天
          </view>
        </view>
        <view class="time-right">
          （请选择发货时间） 默认立即发货
          <uni-icons type="right"></uni-icons>
        </view>
      </view>
      <!-- 配送 -->
      <view class="peisong">
        <view class="left">
          配送
        </view>
        <view class="right">
          物流配送 快递500元
        </view>
      </view>
      <!-- 发票 -->
      <!--      <view class="fapiao">
        <view class="left">
          发票
        </view>
        <view class="right">
          选择发票信息
          <uni-icons type="right"></uni-icons>
        </view>
      </view> -->
    </view>
    <!-- 收货地址pop -->
    <u-popup :show="show" mode="bottom" @close="close" @open="open">
      <view>
        <text>人生若只如初见，何事秋风悲画扇</text>
      </view>
    </u-popup>
    <view class="oders">
      <view>
        <text>商品金额：</text>
        <text>¥12998.00</text>
      </view>
      <view>
        <text>员工优惠：</text>
        <text>-¥100.00</text>
      </view>
      <view>
        <text>配送费：</text>
        <text>-¥100.00</text>
      </view>
    </view>
    <!-- 结算 -->
    <my-settle :defaultAddress="defaultAddress"></my-settle>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 默认地址展示
        defaultAddress: {},
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
        // pop弹出层开关
        show: false,
        Newoptions: [{
          text: '删除',
          style: {
            backgroundColor: '#B8C1CC'
          }
        }],
        cart: [],
        // 用户地址列表
        userAddress: []
      };
    },
    methods: {
      // 选择 收货地址
      chooseUserAddress() {
        uni.redirectTo({
          url: '/subpkg/addressList/addressList'
        })
      },
      //  修改收货地址
      amendAddress(addressData) {
        uni.redirectTo({
          url: '/subpkg/addressList/addressList'
        })
      },
      //删除商品
      async deleteGoods(goods) {
        const params = {
          cartId: goods.cartId
        }
        const res = await uni.$http.post('/flow/cart/remove', params)
        if (res.data.code !== 200) return uni.$showMsg('删除失败')
        this.getUserCarCount()
      },
      //加减商品数量
      numChangeHandler(value, id) {
        const obj = {
          cartId: id + '',
          amount: value + ''
        }
        this.updateBuyCarCount(obj)
      },
      // updateBuyCarCount点击修改购物车数量
      async updateBuyCarCount(obj) {
        const res = await uni.$http.post('/flow/cart/quantitychange', obj)
        if (res.data.code !== 200) return uni.$showMsg('修改失败')
      },
      open() {},
      close() {
        this.show = false
      },
      // 获取用户购物车信息
      async getUserCarCount() {
        let res = await uni.$http.get('/flow/cart/list')
        this.cart = res.data.data
      },
    },
    onLoad(options) {
      if (JSON.stringify(options) == "{}") return
      const adressInfo = JSON.parse(decodeURIComponent(options.addressInfo));
      this.defaultAddress = adressInfo
    },
    onShow() {
      //获取当前用户购物车数据
      this.getUserCarCount()
    }
  }
</script>

<style lang="scss">
  .page {
    background-color: #F5F6F9;
  }

  page {
    background-color: #F5F6F9;
  }

  .addAddress {
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    background-color: #FFFFFF;
    padding: 0 16px;

    .text {
      font-size: 14px;
      color: #000000;
    }
  }

  // 商品item
  .goodsList {
    background-color: white;
    padding: 0 16px;
    margin-bottom: 20rpx;

    .goods-item {
      display: flex;
      padding: 10px 5px;
      border-bottom: 1px solid #f0f0f0;

      .goods-item-left {
        margin-right: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .goods-pic {
          width: 100px;
          height: 100px;
          display: block;
        }
      }

      .goods-item-right {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;

        .goods-info-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .goods-name {
          font-size: 14px;
          color: #66737F;
        }

        .goods-specification {
          font-size: 10px;
          color: #8F9CA9;
        }

        .goods-price {
          font-size: 14px;
          color: #141414;
        }
      }
    }
  }

  .distribution {
    padding: 0 16px;
    background-color: white;

    .time {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
      border-bottom: 1px solid #8F9CA9;
      height: 50px;


      .time-left {
        .big {
          font-size: 14px;
          color: #141414;
        }

        .small {
          font-size: 11px;
          color: #141414;
        }
      }

      .time-right {
        font-size: 14px;
        color: #141414;
        height: 10px;
        line-height: 10px;
      }
    }

    .peisong {
      margin-bottom: 30rpx;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #141414;
      border-bottom: 1px solid #8F9CA9;
      height: 45px;
      line-height: 45px;
      text-align: center;

      .left {}

      .right {}
    }

    .fapiao {
      margin-bottom: 30rpx;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #141414;
      height: 45px;
      line-height: 45px;
      text-align: center;

      .left {}

      .right {}
    }
  }

  .oders {
    padding: 0 16px;
    height: 300px;
    background-color: white;

    view {
      display: flex;
      justify-content: space-between;
      color: #141414;
      font-size: 14px;
      height: 34px;
      line-height: 34px;
      margin-bottom: 10rpx;
    }
  }

  .jiesuan {
    display: flex;
    justify-content: center;

    view {
      background-color: #000000;
      width: 325px;
      height: 36px;
      color: white;
      border-radius: 14px;
      line-height: 36px;
      text-align: center;
    }
  }

  .container-main {
    padding-bottom: 50px;

  }

  .address-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px;

    .left {
      width: 240px;

      .name {
        font-size: 18px;
        color: #000000;
        margin-bottom: 20rpx;
      }

      .address {
        font-size: 14px;
        color: #8F9CA9;
        word-wrap: break-word;
      }
    }
  }
</style>